<template>
<div class="img"></div>
  <!-- 导航部分-->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <div class="navbar-brand">师生交流预约系统</div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
        </ul>
      </div>
    </div>
  </nav>
  <!--登录界面-->
  <div class="col ">
    <div class="row mt-2">
      <!-- 距离顶部间距为2 -->
      <div class="col"></div>
      <div class="col" style="margin-top: 80px">
        <!-- <form action="login"> -->
          <div class="form-group">
            <label for="exampleInputEmail1" style="margin-bottom: 10px;">账号</label>
            <input type="text" class="form-control" v-model="user.userID"  aria-describedby="basic-addon1"  style='color:#999'>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1" style="margin: 10px 0;">密码</label>
            <input type="password"  v-model="user.password" class="form-control" aria-describedby="basic-addon1">
          </div>
          <div class="second">
            <li style="list-style: none;margin: 10px 0;">
             老师 <input type="radio" @click="isTeacher"   name="type"> 
             管理员 <input type="radio" @click="isAdmin"   name="type">
             学生 <input type="radio" @click="isStudent"  name="type">
            </li>
             
          </div>
          <span style=" display: block;margin-top: 20px; width: 466.29px; height: 24px;;" class="text-danger">{{ message }}</span>
          <button id="1" class="btn btn-primary btn-block" @click="login"
           style=" margin-top: 21px;width:100%;" data_ifTrue=2>立即登录</button>
           
        <!-- </form> -->
      </div>
      <div class="col"></div>
    </div>
  </div>
</template>

<script  setup>
import router from "@/router"
import {ref,reactive} from "vue"
import {useRoute,useRouter} from 'vue-router'
import axios,{AxiosError} from 'axios'

const user=reactive({
   userID:"",
   password:"",
   type:""
})
let message=ref("")

// 根据用户选择判断对应的用户类型
function isTeacher()
{
   user.type="tea"
}
function isAdmin()
{
   user.type="admin"
}
function isStudent()
{
   user.type="stu"
}

//button 点击做简单拦截后将数据传给后端
function login(){
  //简单的拦截user的各个属性不能为空
  if(user.password && user.type && user.userID.length==12)
  {
    reqData()
  }
  else if(user.userID.length!=12){
    message.value="账号不合法"
  }
 else{
  message.value="请将信息填写完整再提交！"
 }
}

//异步请求向后端请求数据
async function reqData(){
  //将userJSON化
  const val=JSON.stringify(user)

  try {
      // 发请求在后端拿数据
      let result = await axios({
        method:'get',
        url:"http://localhost:8080/findByID",
        params:user
      })
     //判断密码是否正确
     if(result.data==null){
        message.value="账号不存在"}
     else if(result.data.password==user.password){//根据用户的信息请求对应信息并跳转到指定路由
      if(result.data.type==user.type){
        getPointInfo(result.data.type,result.data.userID)
      }
      else{
        message.value="用户账号类型错误,请重新选择"
        user.type=""
      }
     }

     else {
      message.value="密码错误，请重新输入"
      user.password=""
     }
    } catch (error) {
      // 处理错误
      const err =error
      console.log(err.message)
    }
}
//根据用户类型和用户Id获取信息并跳转到指定的界面
async function getPointInfo (type,userID){

  if(type=="stu"){
    //跳转到指定路由
    router.push({path:"/index",query:{user_id:userID,type:"student"}})
  }
  if(type=="tea"){
    router.push({path:"/index",query:{user_id:userID,type:"teacher"}})
  }
  if(type=='admin'){
    router.push({path:"/adminIndex",query:{user_id:userID,type:"admin"}})
  }
}


</script>
<style scoped>


</style>


